<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选，全不选</title>
</head>
<body>
<script type="text/javascript" src="../jquery/jquery-3.5.1.js"></script>
<script type="text/javascript">
  $(function () {
    //全选单击事件
    $("#checkedAllBtn").click(function () {
      $(":checkbox").prop("checked", true);
    });
    //不选单击事件
    $("#checkedNoBtn").click(function () {
      $(":checkbox").prop("checked", false);
    });
    //反选单击事件
    $("#checkedRevBtn").click(function () {
      //查询全部的球类复选框
      $(":checkbox[name='items']").each(function () {
        //在each遍历func函数中，有一个this对象，这个this对象是当前正在遍历到的dom对象
        this.checked = !this.checked;
      });
      //要检查是否满选
      //获取全部球类的个数
      var allCount=$(":checkbox[name='items']").length;
      var checkedCount=$(":checkbox[name='items']:checked").length;
      $("#checkedAllBox").prop("checked",allCount==checkedCount);
    });
    $("#sendBtn").click(function (){
      $(":checkbox[name='items']:checked").each(function (){
        alert(this.value);
      });
    });
    //给全选/全不选绑定单击事件
    $("#checkedAllBox").click(function (){
      //alert(this.checked);
      $(":checkbox[name='items']").prop("checked",this.checked);
    });
    $(":checkbox[name='items']").click(function (){
      var allCount=$(":checkbox[name='items']").length;
      var checkedCount=$(":checkbox[name='items']:checked").length;
      $("#checkedAllBox").prop("checked",allCount==checkedCount);
    })
  });
</script>
<form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkedAllBox">全选/全不选
<br>
<input type="checkbox" name="items" value="足球">足球
<input type="checkbox" name="items" value="篮球">篮球
<input type="checkbox" name="items" value="羽毛球">羽毛球
<input type="checkbox" name="items" value="乒乓球">乒乓球
<br>
<input type="button" id="checkedAllBtn" value="全选">
<input type="button" id="checkedNoBtn" value="全不选">
<input type="button" id="checkedRevBtn" value="反选">
<input type="button" id="sendBtn" value="提交">
</form>
</body>
</html>